<template>
	<view class="view">
		<!-- #ifdef APP-PLUS -->
		<view class="head" :style="{ paddingTop: Statusbar + 'px' }">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<view class="head" :style="{ paddingTop: CustomBar + 'px' }">
				<!-- #endif -->
				<view class="remind" @click="to('/pages/MinePages/message/main')">
					<image src="/static/images/noticem.png" />
					<text v-if="messageCount > 0">{{ messageCount }}</text>
				</view>
				<view class="user">
					<view class="avatar-box" @click="to('/pages/MinePages/userInfo/main')">
						<image class="avatar" v-if="user.avatar" :src="user.avatar" />
						<image class="avatar" v-else src="/static/images/default_avatar.png" />
						<view class="name">{{ user.nickName || '立即登录' }}</view>
					</view>
				</view>
				<!-- 订单服务 -->
				<view class="section">
					<view class="circle-box">
						<view class="title" v-show="user.healthLabelList.size>0">我加入的圈子</view>
						<scroll-view class="circle-list" scroll-x>
							<view class="circle-item" v-for="(item, index) in user.healthLabelList" :key="index"
								@click="to('/pages/CommunityPages/circleDetails/main?id=' + item.groupId)">
								{{ item.labelName }}
							</view>
						</scroll-view>
					</view>
					<view class="grid">
						<view class="item" v-for="(item, index) in orderGrid" :key="index" @click="goOrder(item.page)">
							<image :src="item.icon" mode="aspectFit"></image>
							<view>{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推广 -->
			<view class="popularize-list">
				<view class="left-item" @click="to('/pages/MinePages/spread/moneyDetail')">
					<view class="item">
						<view>推广奖励</view>
						<image class="more-icon" src="/static/images/ic_next.png"></image>
					</view>
					<view class="money">
						<text>￥</text>
						{{ account || 0 }}
					</view>
				</view>
				<view class="right-item">
					<view class="item" @click="to('/pages/MinePages/share/index')">
						<view>邀请好友</view>
						<image class="more-icon" src="/static/images/ic_next.png"></image>
					</view>
					<view class="item" style="margin-top: 10rpx;" @click="to('/pages/MinePages/spread/spreadStats')">
						<view>推广统计</view>
						<image class="more-icon" src="/static/images/ic_next.png"></image>
					</view>
				</view>
			</view>
			<!-- 陪诊师中心 -->
			<view class="grid-box">
				<view class="title">陪诊师中心</view>
				<view class="grid">
					<view v-if="user.isEscort == 1" class="item" @click="to('/pages/attendantPages/index')">
						<image src="/static/images/centrepz.png"></image>
						<view>陪诊师中心</view>
					</view>
					<view v-else class="item" @click="to('/pages/attendantPages/attendantSettled')">
						<image src="/static/images/Settlepz.png"></image>
						<view>陪诊师入驻</view>
					</view>
					<!-- <view class="item" @click="to('/pages/attendantPages/quickOrder')">
						<image src="/static/images/Completedsd.png"></image>
						<view>快速下单</view>
					</view> -->
<!-- 					<view class="item" @click="to('/pages/other/article/article?type=8')">
						<image src="/static/images/Settlexy.png"></image>
						<view>入驻协议</view>
					</view> -->
				</view>
			</view>
			<!-- 常用工具 -->
			<view class="grid-box">
				<view class="title">常用工具</view>
				<view class="grid">
					<view class="item" v-for="(item, index) in toolsGrid" :key="index" @click="to(item.page)">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import {
		getUserInfo,
		promotionAccount
	} from '@/apis/request.js';

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				Statusbar: this.StatusBar,
				messageCount: 0,
				user: {},
				account: '',
				orderGrid: [{
						icon: '/static/images/wholedd.png',
						name: '全部',
						page: '/pages/mine/myOrder?current=0'
					},
					{
						icon: '/static/images/dpayment.png',
						name: '待付款',
						page: '/pages/mine/myOrder?current=1'
					},
					{
						icon: '/static/images/dfwservice.png',
						name: '待服务',
						page: '/pages/mine/myOrder?current=2'
					},
					{
						icon: '/static/images/fwzservice.png',
						name: '服务中',
						page: '/pages/mine/myOrder?current=3'
					},
					{
						icon: '/static/images/Completedsd.png',
						name: '已完成',
						page: '/pages/mine/myOrder?current=4'
					},
					{
						icon: '/static/images/drawbackz.png',
						name: '退款中',
						page: '/pages/mine/myOrder?current=5'
					},
					{
						icon: '/static/images/yjdrawback.png',
						name: '已退款',
						page: '/pages/mine/myOrder?current=6'
					},
					{
						icon: '/static/images/yqxCanceled.png',
						name: '已取消',
						page: '/pages/mine/myOrder?current=7'
					}
				],
				toolsGrid: [/* {
						icon: '/static/images/self-service@2x.png',
						name: '自助康养',
						page: '/pages/nutrition/nutrition'
					}, */
					{
						icon: '/static/images/comorbidity@2x.png',
						name: '同病互助',
						page: '/pages/community/main'
					},
					{
						icon: '/static/images/Wikipedia@2x.png',
						name: '疾病百科',
						page: '/pages/other/search/main'
					},
					{
						icon: '/static/images/myinterest.png',
						name: '我的关注',
						page: '/pages/MinePages/focus/main?type=1'
					},
					{
						icon: '/static/images/myinvitation.png',
						name: '我的帖子',
						page: '/pages/MinePages/mypost/main'
					},
					{
						icon: '/static/images/myhelp.png',
						name: '我的互助',
						page: '/pages/MinePages/myhelp/main'
					},
					{
						icon: '/static/images/mycollect.png',
						name: '我的收藏',
						page: '/pages/MinePages/collection/main'
					},
					{
						icon: '/static/images/myCirclefriend.png',
						name: '我的圈友',
						page: '/pages/MinePages/friend/friend'
					},
					{
						icon: '/static/images/mycomment.png',
						name: '我的点评',
						page: '/pages/MinePages/yelp/yelp'
					},
					{
						icon: '/static/images/invitationhy.png',
						name: '我的推广',
						page: '/pages/MinePages/spread/spread'
					},
					{
						icon: '/static/images/examinegl.png',
						name: '就诊人管理',
						page: '/pages/MinePages/order/patientMmanage'
					},
					{
						icon: '/static/images/sharetj@2x.png',
						name: '健康档案',
						page: '/pages/MinePages/health/main'
					},
					{
						icon: '/static/images/address.png',
						name: '地址管理',
						page: '/pages/other/address/address'
					},
					{
						icon: '/static/images/lrdzhistory.png',
						name: '浏览历史',
						page: '/pages/MinePages/history/index'
					},
					{
						icon: '/static/images/jfscintegral.png',
						name: '积分商城',
						page: '/pages/other/integral/mall'
					},
					{
						icon: '/static/images/helpzx@2x.png',
						name: '帮助中心',
						page: '/pages/MinePages/helpCenter/helpCenter'
					},
					{
						icon: '/static/images/questionup.png',
						name: '问题反馈',
						page: '/pages/MinePages/feedback/main'
					},
					{
						icon: '/static/images/setupsz@2x.png',
						name: '应用设置',
						page: '/pages/MinePages/set/main'
					}
				]
			};
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getInfo();
				this.getMessageCount();
			} else {
				this.user = {};
			}
		},
		methods: {
			to(url) {
				uni.navigateTo({
					url
				});
			},
			goOrder(url) {
				uni.reLaunch({
					url
				});
			},
			async getInfo() {
				this.user = await getUserInfo({});
			},
			getMessageCount() {
				this.$api.http('/user/message/info/unreadMessagesNumber', 'GET', {}, res => {
					this.messageCount = res.data.result || 0;
				});
			},
			getAccount() {
				promotionAccount().then(res => {
					this.account = res.promotionReward;
				});
			}
		},
		onLoad() {
			this.getAccount();
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		min-height: 100vh;
		background: linear-gradient(-180deg, #006efd80, #006efd00);
		background-size: 750upx 498upx;
		background-repeat: no-repeat;

		.head {
			position: relative;
			margin-bottom: 22upx;
			min-height: calc(418upx - var(--status-bar-height));
			background: url(../../static/images/bg_home.png);
			background-size: 750upx 498upx;
			background-repeat: no-repeat;

			.user {
				margin: 0 0 50upx 30upx;
				display: flex;
				align-items: center;

				.avatar-box {
					flex: 1;
					display: flex;
					align-items: center;
					align-content: center;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
						overflow: hidden;
						border-radius: 50%;
						border: 3upx solid white;
					}

					.name {
						color: black;
						font-size: 34rpx;
						font-weight: 500;
					}
				}
			}

			.remind {
				position: relative;
				text-align: right;
				margin: 20upx 40upx 0 0;

				image {
					width: 34rpx;
					height: 34rpx;
				}

				text {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					font-size: 20rpx;
					color: #ffffff;
					border-radius: 20rpx;
					background-color: red;
				}
			}

			.section {
				margin: 0 30upx;
				background: white;
				border-radius: 20upx;
				box-shadow: 0 0 20upx #00000017;

				.circle-box {
					border-bottom: 1upx solid #e8e8e8;

					.title {
						padding: 30upx 0 10rpx 30upx;
						color: black;
						font-size: 30upx;
						font-weight: 500;
					}

					.circle-list {
						width: 100%;
						white-space: nowrap;

						.circle-item {
							display: inline-block;
							margin: 20upx 5upx;
							padding: 10upx 20upx;
							color: #32C59A;
							font-size: 22upx;
							border-radius: 44upx;
							background: #e8f1fd;

							&:first-child {
								margin-left: 30upx;
							}

							&:last-child {
								margin-right: 30upx;
							}
						}
					}
				}
			}
		}

		.popularize-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 30upx 22upx 30upx;
			height: 190rpx;

			.more-icon {
				height: 28rpx;
				width: 18rpx;
			}

			.left-item {
				box-sizing: border-box;
				padding: 30rpx;
				width: 400rpx;
				height: 190rpx;
				background-color: #fff;
				border-radius: 20upx;
				box-shadow: 0 0 20upx #00000017;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.money {
					font-size: 70rpx;

					text {
						font-size: 30rpx;
					}
				}
			}

			.right-item {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 20upx;
					box-shadow: 0 0 20upx #00000017;
					padding: 30rpx;
					width: 280rpx;
					height: 90rpx;

					view {
						font-size: 30rpx;
					}
				}
			}
		}

		.grid-box {
			margin: 0 30upx 30upx 30upx;
			background: white;
			border-radius: 20upx;
			box-shadow: 0 0 20upx #00000017;

			.title {
				padding: 30upx;
				color: black;
				font-size: 30upx;
				font-weight: 500;
				border-bottom: 1upx solid #e8e8e8;
			}
		}

		.grid {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10upx 0;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 172upx;
				padding: 20upx 0;

				image {
					width: 52upx;
					height: 52upx;
					filter: invert(58%) sepia(85%) saturate(357%) hue-rotate(112deg) brightness(97%) contrast(84%);
				}

				view {
					margin-top: 10upx;
					color: #333333;
					font-size: 24upx;
				}
			}
		}
	}
</style>